<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    label-width="100px"
    v-loading="formLoading"
  >
    <el-form-item label="文件" prop="file">
      <el-upload
        ref="uploadRef"
        action="https://jsonplaceholder.typicode.com/posts/"
        :before-upload="beforeUpload"
        :on-change="handleChange"
        :auto-upload="false"
        :file-list="fileList"
      >
        <template #trigger>
          <el-button type="primary">选取文件</el-button>
        </template>
        <el-button type="success" @click="submitUpload">上传文件</el-button>
<!--        <template #tip>-->
<!--          <div class="el-upload__tip">请上传文件，文件名和文件大小会自动填充</div>-->
<!--        </template>-->
      </el-upload>
    </el-form-item>
    <!-- 文件列表展示 -->
    <el-form-item >
      <el-table :data="fileList" border v-if="fileList.length > 0" :stripe="true">
          <el-table-column prop="fileName" label="文件名"  />
          <el-table-column prop="fileSize" label="大小"  />
          <el-table-column prop="createDate" label="创建日期"  :formatter="dateFormatter2"/>
          <el-table-column prop="creator" label="创建者" />
        </el-table>
    </el-form-item>



  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { HandoverManagementApi } from '@/api/oa/handovermanagement'
import { UploadFiles } from 'element-plus'
import { dateFormatter2 } from '@/utils/formatTime'

const props = defineProps<{
  handoverId: number | undefined // 交接单ID（主表的关联字段）
}>()
const formLoading = ref(false) // 表单的加载中
const formData = ref({
  id: undefined,
  handoverId: undefined,
  fileName: undefined,
  fileSize: undefined,
  createDate: undefined,
  filePath: undefined,
  creator: undefined,
})
const formRules = reactive({
  handoverId: [{ required: true, message: '交接单ID不能为空', trigger: 'blur' }],
  fileName: [{ required: true, message: '文件名不能为空', trigger: 'blur' }],
  fileSize: [{ required: true, message: '文件大小（字节）不能为空', trigger: 'blur' }],
  createDate: [{ required: true, message: '创建日期不能为空', trigger: 'blur' }],
  filePath: [{ required: true, message: '文件存储路径不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref
const uploadRef = ref() // 上传组件 Ref
const fileList = ref<UploadFiles>([]) // 文件列表

// 初始化表单数据
watch(
  () => props.handoverId,
  async (val) => {
    // 重置表单
    formData.value = {
      id: undefined,
      handoverId: undefined,
      fileName: undefined,
      fileSize: undefined,
      createDate: undefined,
      filePath: undefined,
      creator: undefined,
    }
    fileList.value = [] // 清空文件列表
    // val 非空，则加载数据
    if (!val) {
      return
    }
    try {
      formLoading.value = true
      const data = await HandoverManagementApi.getHandoverAttachmentByHandoverId(val)
      if (!data) {
        return
      }
      formData.value = {
        id: data.id,
        handoverId: data.handoverId,
        fileName: data.fileName,
        fileSize: data.fileSize,
        createDate: data.createDate,
        filePath: data.filePath,
        creator: data.creator,
      }
      fileList.value = [
        {
          name: data.fileName,
          size: data.fileSize,
          url: data.filePath,
          fileName: data.fileName,
          fileSize: data.fileSize,
          createDate: data.createDate,
          creator: data.creator,// 确保接口返回的数据中有 address 字段
        },
      ]
    } finally {
      formLoading.value = false
    }
  },
  { immediate: true }
)

// 上传前的校验
const beforeUpload = (file: File) => {
  formData.value.fileName = file.name
  formData.value.fileSize = file.size
  return true
}

// 文件状态改变时的处理
const handleChange = (file: UploadFile, fileList: UploadFiles) => {
  if (fileList.length > 0) {
    formData.value.fileName = fileList[0].name
    formData.value.fileSize = fileList[0].size
  } else {
    formData.value.fileName = undefined
    formData.value.fileSize = undefined
  }
}

// 提交上传
const submitUpload = () => {
  uploadRef.value.submit()
}

/** 表单校验 */
const validate = () => {
  return formRef.value.validate()
}

/** 表单值 */
const getData = () => {
  return formData.value
}

defineExpose({ validate, getData })
</script>

<style scoped>
.el-upload__tip {
  font-size: 12px;
  color: #999;
}
</style>
